<template>

  <!--公共头部-->
    <Header/>
  <!--end-->

  <!--banner-->
    <div class="banner-content">
        <div class="swiper-container banner-lb">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="javascript:void(0);">
                        <img src="@/assets/image/banner.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="javascript:void(0);">
                        <img src="@/assets/image/banner.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="banner-abs">
            <div class="banner-abs-box">
                <div class="banner-abs-title">朝阳金融网历史年化收益率</div>
                <b>{{ indexData.baseInfo.productAvgRate }}<i>%</i></b>
                <p>平台用户数</p>
                <span>{{ indexData.baseInfo.registerUsers }}<i>位</i></span>
                <p class="banner-abs-border">累计成交金额</p>
                <span>{{ indexData.baseInfo.bidSumMoney }}.0<i>元</i></span>
            </div>
        </div>
    </div>
    <div class="banner-list">
        <ul>
            <li>
                <img src="@/assets/image/banner-tag1.png" alt="">
                <p>
                    <b>实力雄厚</b>
                    <span>亿级注册资本 ,千万技术投入</span>
                </p>
            </li>
            <li>
                <img src="@/assets/image/banner-tag2.png" alt="">
                <p>
                    <b>风控严苛</b>
                    <span>30道风控工序，60项信用审核</span>
                </p>
            </li>
            <li>
                <img src="@/assets/image/banner-tag3.png" alt="">
                <p>
                    <b>投资省心</b>
                    <span>资金安全风控，银行安全托管</span>
                </p>
            </li>
        </ul>
    </div>

  <!--产品-->
    <div class="content">
        <!--        新手宝-->
        <h2 class="public-title"><span>新手宝</span></h2>
        <div class="new-user" v-for="xinItem in indexData.listInfo.xinList" :key="xinItem.id">
            <div class="new-user-sm">
                <span>{{ xinItem.bidMinLimit }}元起投</span>
                <span>投资最高限额{{ xinItem.bidMaxLimit }}元</span>
                <span>当日即系</span>
            </div>
            <div class="new-user-number">
                <ul>
                    <li>
                        <p><b>{{ xinItem.rate }}</b>%</p>
                        <span>历史年化收益率</span>
                    </li>
                    <li>
                        <p><b>{{ xinItem.cycle }}</b>个月</p>
                        <span>投资周期</span>
                    </li>
                    <li>
                        <p><b>{{ xinItem.leftProductMoney }}.0</b>元</p>
                        <span>余利可投资金额</span>
                    </li>
                </ul>
                <a href="javascript:void(0);" class="new-user-btn"
                   @click="goLink('/page/product/detail',{id: xinItem.id})"
                >立即投资</a>
            </div>
            <span class="new-tag">新用户专享</span>
        </div>

        <!--        优选产品-->
        <h2 class="public-title"><span>优选产品</span> <a href="javascript:void(0);" class="public-title-more"
                                                          @click="goLink('/page/product/list',{pType: 1})">查看更多产品>></a>
        </h2>
        <ul class="preferred-select clearfix">
            <li v-for="(youItem,index) in indexData.listInfo.youList" :key="youItem.id">
                <h3 class="preferred-select-title">
                    <span>{{ youItem.name }}</span>
                    <img src="@/assets/image/1-bg1.jpg" alt="" v-if="index%3 == 1">
                    <img src="@/assets/image/1-bg2.jpg" alt="" v-else-if="index%3 == 2">
                    <img src="@/assets/image/1-bg3.jpg" alt="" v-else>
                </h3>
                <div class="preferred-select-number">
                    <p><b>{{ youItem.rate }}</b>%</p>
                    <span>历史年化收益率</span>
                </div>
                <div class="preferred-select-date">
                    <div>
                        <span>投资周期</span>
                        <p><b>{{ youItem.cycle }}</b>个月</p>
                    </div>
                    <div>
                        <span>余利可投资金额</span>
                        <p><b>{{ youItem.leftProductMoney }}.0</b>元</p>
                    </div>
                </div>
                <p class="preferred-select-txt">
                    优选计划项目，投资回报周期{{ youItem.cycle }}个月，起点低，适合短期资金周转、对流动性要求高的投资人。
                </p>
                <a href="javascript:void(0);" class="preferred-select-btn"
                   @click="goLink('/page/product/detail',{id: youItem.id})"
                >立即投资</a>
            </li>

        </ul>

        <!--        散标产品-->
        <h2 class="public-title"><span>散标产品</span> <a href="javascript:void(0);"  class="public-title-more"
                                                          @click="goLink('/page/product/list',{pType: 2})"
        >查看更多产品>></a>
        </h2>
        <ul class="preferred-select clearfix">
            <li v-for="sanItem in indexData.listInfo.sanList" :key="sanItem.id">
                <h3 class="preferred-select-title1">个人信用消费借款
                    <span>散标</span>
                </h3>
                <div class="preferred-select-number">
                    <p><b>{{ sanItem.rate }}</b>%</p>
                    <span>历史年化收益率</span>
                </div>
                <div class="preferred-select-date">
                    <div>
                        <span>投资周期</span>
                        <p><b>{{ sanItem.cycle }}</b>个月</p>
                    </div>
                    <div>
                        <span>余利可投资金额</span>
                        <p><b>{{ sanItem.leftProductMoney }}.0</b>元</p>
                    </div>
                </div>
                <p class="preferred-select-txt">
                    优选计划项目，投资回报周期{{ sanItem.cycle }}个月，起点低，适合短期资金周转、对流动性要求高的投资人。
                </p>
                <a href="javascript:void(0);" class="preferred-select-btn"
                   @click="goLink('/page/product/detail',{id: sanItem.id})"
                >立即投资</a>
            </li>

        </ul>

    </div>

  <!--说明-->
    <div class="information-box">
        <ul>
            <li>
                <img src="@/assets/image/2-icon1.png" alt="">
                <p>优质借款</p>
                <span>严苛风控，多重审核</span>

            </li>
            <li>
                <img src="@/assets/image/2-icon2.png" alt="">
                <p>次日计息</p>
                <span>闪电成交，谁比我快</span>
            </li>
            <li>
                <img src="@/assets/image/2-icon3.png" alt="">
                <p>全年无休</p>
                <span>百万用户，一路同行</span>
            </li>
            <li>
                <img src="@/assets/image/2-icon4.png" alt="">
                <p>知心托付</p>
                <span>百万用户，一路同行</span>
            </li>
            <li>
                <img src="@/assets/image/2-icon5.png" alt="">
                <p>技术保障</p>
                <span>千万投入，专注研发</span>
            </li>
        </ul>
    </div>

  <!--公共底部-->
    <Footer/>

</template>

<script>
// eslint-disable-next-line no-unused-vars

import Header from "@/views/common/Header.vue";
import Footer from "@/views/common/Footer.vue";
import {initIndexBaseInfoDataApi} from "@/api";
import {initIndexListInfoDataApi} from "@/api/product";


// eslint-disable-next-line no-unused-vars


let indexDataObject = {
    baseInfo: {
        registerUsers: 0,
        productAvgRate: 0.0,
        bidSumMoney: 0,
    },
    listInfo: {
        xinList: [{
            id: 1001,
            name: '新手宝',
            rate: '5.6%',
            cycle: 1,
            leftProductMoney: 1000,
            status: 0,
            type: 1,
            bidMinLimit: 0,
            bidMaxLimit: 0
        }],
        youList: [{
            id: 1003,
            name: '优选',
            rate: '5.6%',
            cycle: 1,
            leftProductMoney: 1000,
            status: 0,
            type: 1,
            bidMinLimit: 0,
            bidMaxLimit: 0
        }],
        sanList: [{
            id: 1002,
            name: '散标',
            rate: '5.6%',
            cycle: 1,
            leftProductMoney: 1000,
            status: 0,
            type: 1,
            bidMinLimit: 0,
            bidMaxLimit: 0
        }]
    }

}

export default {
    name: "Index",
    components: {Footer, Header},
    data() {
        return {
            indexData: indexDataObject

        }

    },
    methods: {
        initIndexData() {
            initIndexBaseInfoDataApi().then(res => {
                this.indexData.baseInfo = res
            }).catch(err => {
                console.log(err)

            })
            initIndexListInfoDataApi().then(res => {
                this.indexData.listInfo = res
            }).catch(err => {
                console.log(err)
            })
        },
        //  跳转到指定页页
        goLink(path,params){
            // 由于props只适用于组件间数据传递，而调用该方法的是一个标签，而不是组件，所以必须使用路由来传参
            this.$router.push({
                path:path,
                query: params
            })


        }


    },

    mounted() {
        // let md = this.$md5("hello")
        // console.log('md:', md)
        // let uuidv = this.$uuid();
        // console.log('uuid:', uuidv)
        // // layx.msg('hello,    layx')
        // // layx.msg('注册成功',{dialogIcon:'success'})
        // // this.$layx.alert('投资提示','投资成功',null,{dialogIcon:'success'});
        // const queryString = this.$qs.stringify({page: 1, pageSize: 10, filter: 'name'});
        // console.log(queryString);
        //
        //
        // // this.$layx.confirm('默认提示','Layx 会做为你下一个项目弹窗的首选吗？',null,{
        // //     buttons:[
        // //         {
        // //             label:'确定',
        // //             // eslint-disable-next-line no-unused-vars
        // //             callback:function(id, button, event){
        // //                 alert("你点击了确定操作");
        // //                 this.$layx.destroy(id);
        // //             }
        // //         },
        // //         {
        // //             label:'取消',
        // //             // eslint-disable-next-line no-unused-vars
        // //             callback:function(id, button, event){
        // //                 alert("你点击了取消操作");
        // //                 this.$layx.destroy(id);
        // //             }
        // //         }
        // //     ]
        // // });
        // console.log('==请求发送======')
        // demo().then(res => {
        //
        //     console.log(res)
        //
        //
        // }).catch(err => {
        //     console.log(err)
        //
        // })
        this.initIndexData()

    }


}
</script>

<style scoped>


.demo {

    color: rgb(160, 123, 67);

}

</style>
